<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="command/echarts/echarts.min.js"></script>
    <script src="command/jquery/jquery-3.4.1.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    let typeName = [];
    let seriesTypeName = {};
    let appTypeData = [];

    $.ajax({
        url: "/getPieAppTypeList",         //设置数据访问接口
        method:"PUT",
        dataType:"json",
        async: false,
        success: function (data) {
            appTypeData = data;
            for (let i = 0; i < data.length; i++){
                typeName.push(data[i].name);
                seriesTypeName[data[i].name] = i<6;
            }
        },
        error :function(errorMsg) {//请求失败执行的方法
            alert("获取后台数据失败！");
        }
    });
    console.log("获取所有的标题"+typeName);

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));


    var option = {
        title: {
            text: '应用类别占比',
            subtext: '七麦数据',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: typeName,
            selected: seriesTypeName
        },
        series: [
            {
                name: '类别数量',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                data: appTypeData,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };




    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>